<%@page import="java.util.Arrays"%>
<%@page import="org.ifilm.model.Project"%>
<%@page import="java.util.List"%>
<%@page import="org.ifilm.controller.ProjectController"%>
<%@page import="org.ifilm.util.GeneralConstants"%>


<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Edit Postings</title>
		
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/css/index.css" rel="stylesheet" />
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
		
		<script src="/film/js/jquery.js"></script>
		<script src="/film/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/film/js/jquery.validator.js"></script>
		<script src="/film/js/photoUpload.js"></script>
		
		<style>
			body {
				padding-top: 60px;
				/* 60px to make the container go all the way to the bottom of the topbar */
			}		
		</style>
	</head>
	<body>
		<jsp:include page="navigationBar.jsp"/>		
		<div class="container">
			<form method="POST" action="/film/notice/saveEdit.do?projectId=${project.id}">
				<table class="table table-condensed" width=100%>
					<h2>Edit Postings of <a id="projectRef" href="/film/project/getProject.do?pid=${project.id}"> Project ${project.projectName}</a></h2>
					<c:forEach var="jobPosting" items="${project.jobPostings}">
							<tr>
								<td width=100% border=0>
									<div id="physicalproperties" class="accordion-group">
										<div class="accordion-heading">
											<a class="accordion-toggle" data-toggle="collapse"  href="#${jobPosting.id}">
											type: ${jobPosting.type} <br/>
											description: ${jobPosting.description} </br>
											qualification: ${jobPosting.qualifications}</a>
										</div>	
										<div id="${jobPosting.id}" class="accordion-body collapse">
											<div class="accordion-inner">
												<table width=100%>
													<c:set var="frontCam" value="${jobPosting.type == 'actor' or jobPosting.type == 'actress' or jobPosting.type == 'dublour'}"/>
													<c:if test="${frontCam == true}">
														<tr>
															<td width=66%>Role Description:</td>
															<td>
																${jobPosting.description}
															</td>
														</tr>
											 			<tr>
															<td width=66%>Height:</td>
															<td>
																${jobPosting.minHeight} - ${jobPosting.maxHeight} cm
															</td>
														</tr>
														<tr>
															<td width=66%>Weight:</td>
															<td>
																${jobPosting.minWeight} - ${jobPosting.maxWeight} kg
															</td>
														</tr>
														<tr>
															<td width=66%>Age:</td>
															<td>
																${jobPosting.minAge} - ${jobPosting.maxAge} kg
															</td>
														</tr>
														<tr>
															<td width=66%>Hair Color:</td>
															<td>
																${jobPosting.hairColor}
															</td>
														</tr>
														<tr>
															<td width=66%>Eye Color:</td>
															<td>
																${jobPosting.eyeColor}
															</td>
														</tr>
														<tr>
															<td width=66%>Additional Physical Description:</td>
															<td>
																${jobPosting.physicalDescription}
															</td>
														</tr>
														<tr>
															<td width=66%>Qualifications:</td>
															<td>
																${jobPosting.qualifications}
															</td>
														</tr>
											 		</c:if>
											 		<c:if test="${frontCam == false }">
											 			<tr>
															<td width=66%>Job Description:</td>
															<td>
																${jobPosting.description}
															</td>
														</tr>
											 			<tr>
															<td width=66%>Qualifications:</td>
															<td>
																${jobPosting.qualifications}
															</td>
														</tr>
													</c:if>
												</table>
											</div>
										</div>
									</div>
								</td>
								<td>
									<a class="btn" style="display:block" href="/film/notice/editEachPosting.do?postingId=${jobPosting.id}">Edit</a>
									<a class="btn btn-danger" id="${jobPosting.id}" href="#">Delete!</a>
								</td>
							</tr>
						</c:forEach>
				</table>
			</form>
		</div>
	</body>
	<script type="text/javascript">
		$(".btn.btn-danger").click(function() {
			$.ajax("/film/notice/deleteJobPosting.do?postingId=" + $(this).attr("id")).done(function(data) {
				console.log("Your offer is successful.");
				window.location.href = $("#projectRef").attr("href");
			});
		});
	</script>
	<script src="/film/js/commonScripts.js"></script>
</html>